<template>
  <div class="myfav">
    <common-breadcrumb :crumb="crumb"></common-breadcrumb>
    <el-card>
      <el-table :data="tableData">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="所属项目" prop="projectName"></el-table-column>
        <el-table-column label="接口描述" prop="desc"></el-table-column>
        <el-table-column label="接口地址" prop="url"></el-table-column>
        <el-table-column label="请求方法" prop="methods"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="">
            <el-button type="primary" @click="drawer = true" size="mini">详情</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 接口详情 -->
    <el-drawer
      title="我是标题"
      size="50%"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>
<script>
import commonBreadcrumb from '../../components/common/Breadcrumb'
export default {
  data () {
    return {
      crumb: ['API', '我的收藏'],
      tableData: [
        {
          id: 1,
          projectName: '项目一',
          desc: '获取用户列表',
          url: 'https://ac.xxx.com/users',
          methods: 'GET'
        },
        {
          id: 2,
          projectName: '项目一',
          desc: '获取用户列表',
          url: 'https://ac.xxx.com/users',
          methods: 'GET'
        },
        {
          id: 3,
          projectName: '项目一',
          desc: '获取用户列表',
          url: 'https://ac.xxx.com/users',
          methods: 'GET'
        }
      ],
      drawer: false,
      direction: 'rtl'
    }
  },
  components: {
    commonBreadcrumb
  },
  methods: {
    handleClose () {
      this.drawer = false
    }
  }
}
</script>
